<template>
  <el-form
       ref="configsForm"
       :rules="configsRule"
       label-width="150px"
       :model="form" class="demo-form-inline">
    <el-row>
      <el-col :span="12">
        <el-form-item label="每天免费提现次数" prop="freeTimes">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入次数" v-model.number="form.freeTimes" type="number">
            <template slot="append">次数</template>
          </el-input>
          <el-tip>注：所有配置的“每天 = 自然天”</el-tip>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="超过免费次数收取" prop="fee" class="with-pre-select">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入次数" v-model.number="form.fee" type="number" >
            <template slot="prepend">
              <!--手续费类型：fix固定金额，percent百分比-->
              <el-select v-model="form.feeType">
                <el-option label="百分比" value="percent"></el-option>
                <el-option label="固定金额" value="fix"></el-option>
              </el-select>
            </template>
            <template slot="append">手续费</template>
          </el-input>
          <el-tip>注：按照单笔提现收取“百分比or固定金额”</el-tip>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="手续费上限" prop="feeLimit">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入" v-model.number="form.feeLimit" type="number" >
            <template slot="append">元</template>
          </el-input>
          <el-tip>注：按照单笔提现手续费设置上限，0代表无上限</el-tip>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="每天提现次数上限" prop="countLimit">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入" v-model.number="form.countLimit" type="number" >
            <template slot="append">次数</template>
          </el-input>
          <el-tip>注1：达到“提现次数or提现金额”上限后，则无法进行提现</el-tip>
          <el-tip>注2：“每天提现次数上限”必须大于等于“每天免费提现次数”否则保存失败；</el-tip>
          <!--<el-tip>注3：普通提现每天提现次数上限与“大额提款每天提现上限”共用</el-tip>-->
        </el-form-item>
      </el-col>
      <!-- <el-col :span="12">
        <el-form-item label="每天提现金额上限" prop="amountLimit">
          <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入" v-model.number="form.amountLimit">
            <template slot="append">元</template>
          </el-input>
        </el-form-item>
      </el-col> -->
    </el-row>

    <el-card class="box-card">
      <div slot="header">
        <span>单笔提现限额设置</span>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label="单笔最低限额" prop="minLimit">
            <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.minLimit" type="number" >
              <template slot="append">元</template>
            </el-input>
            <span v-if="form.minLimit*1>=form.maxLimit*1" style="color:red">最低限额不能等于或大于最高限额</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="单笔最高限额" prop="maxLimit">
            <el-input @keyup.enter.native="doSave({action: 'saveForm', form: 'configsForm'})" placeholder="请输入金额" v-model.number="form.maxLimit" type="number" >
              <template slot="append">元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-tip>*最低限额不填写则默认“10元”，最高限额不填写则默认"无上限"</el-tip> -->
    </el-card>
    <div style="padding: 20px 0 20px 150px">
      <el-button v-if="roleCheck('withdraw-config-save')" class="filter-item" type="primary" icon="el-icon-printer"
                 @click="doSave({action: 'saveForm', form: 'configsForm'})">保存
      </el-button>
    </div>
  </el-form>
</template>

<script>
import { form, factory } from '@/build';
import { getWithdrawConfigs, updateWithdrawConfigs } from '@/services/api/withdraw';

export default {
  name: 'withdraw-configs',
  mixins: [form, factory],
  data() {
    return {
      form: {},
      configsRule: {
        countLimit: [
          { required: true, message: '每天提现次数上限不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        freeTimes: [
          { required: true, message: '每天免费提现次数不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        fee: [
          { required: true, message: '超过免费次数收取不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        feeLimit: [
          { required: true, message: '手续费上限不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        minLimit: [
          { required: true, message: '单笔最低限额不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        maxLimit: [
          { required: true, message: '单笔最高限额不能为空' },
          { validator: factory.getValidator('nonNegativeNumber') },
        ],
        min: factory.getRule('moneyType'),
        max: factory.getRule('moneyType'),
      },
    };
  },
  mounted() {
    this.bindSave(updateWithdrawConfigs, 'saveForm', 'form', {
    });
    this.bindGet(getWithdrawConfigs, 'form', {
      format: data => data || {},
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .with-pre-select {
    .el-input-group__prepend {
      .el-select {
        width: 120px;
      }
    }
  }

  .money-range {
    .el-input {
      width: 100px;
    }
  }

</style>
